<template>
	<view class="settlement">
		<view class="top"
			style="background-image: url(https://yft.yangfatang.cn/upload/bg/b6.png); background-size: 100% 100%;">
			<view class="outerCircle">
				<view class="circular flex-c-c-c">
					<view class="text">{{type==1?'累计结算':type==2?'零售':'累计充值'}}</view>
					<view class="money">¥
						<text>{{type==1?objData.set_price:type==2? objData.price : objData.total_price }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="content" v-if="type==1">
			<!-- tab栏 -->
			<view class="tab_box flex-r-a-c">
				<view class="tab_item" :class="item.tabIndex == tabCurrent ? 'active' : ''"
					v-for="(item,index) in tabList" :key="index" :data-tabCurrent="item.tabIndex" @tap="tabChange">
					{{item.tabIndex == 2 ? item.name + `(${objData.no_price} 元)` : item.name + `(${objData.set_price} 元)`}}
				</view>
			</view>

			<!-- 列表 -->
			<view class="list flex-r-b-c" v-for="(item,index) in orderList" :key="index" @tap.stop="goDetails(item.id)">
				<view class="list_l">
					<view class="name" v-if="item.rank != ''">{{`${item.nickname}(${item.rank})`}}</view>
					<view class="name" v-if="item.rank == ''">{{`${item.nickname}`}}</view>
					<view class="time">{{item.buytime}}</view>
				</view>
				<view class="list_r flex-r-s-c">
					<view class="money">{{item.price}}</view>
					<u-icon style="margin-left: 10rpx;" name="arrow-right" size="30" color="#ACACAC"></u-icon>
				</view>
			</view>

		</view>

		<view class="text" v-if="type==1"
			style="width: 100%; margin-top: 40rpx; padding-bottom: 80rpx; text-align: center; font-size: 32rpx; font-weight: bold;">
			{{titleText}}
		</view>
		<view class="list2" v-if="type==2">
			<view class="flex-r-b-c list2_view2" v-for="(v,i) in orderList" :key="i">
				<view class="list2_view">
					<text class="list2_txt_tit">{{v.nickname}}({{v.level}})</text>
					<text class="list2_txt">{{v.idcrode}}</text>
					<text class="list2_time">{{v.set_time}}</text>
				</view>
				<text class="list2_tit">{{v.goods_price}}</text>
			</view>
			<view class="text" v-if="type==2"
				style="width: 100%; margin-top: 40rpx; padding-bottom: 80rpx; text-align: center; font-size: 32rpx; font-weight: bold;">
				{{titleText}}
			</view>
		</view>
		<view class="list3" v-if="type==3">
			<view class="flex-r-b-c view3">
				<text class="title_tit">当前货款余额为</text>
				<text>{{objData.payment_price}}</text>
			</view>
			<view class="view4">
				<view class="flex-r-b-c view3">
					<text class="title_tit">充值金额：</text>
					<view class="flex-r-s-c">
						<!-- <text style="margin-right: 10rpx;">500.00</text> -->
						<input type="text" :value="money" @blur="getMoney" placeholder="请输入充值金额"
							style="text-align: right;" />
						<!-- <u-icon name="arrow-right" color="#ACACAC" size="21"></u-icon> -->
					</view>
				</view>
				<!-- 				<view class="flex-r-b-c view3">
					<text class="title_tit">可得货款：</text>
					<view class="flex-r-s-c">
						<text style="margin-right: 10rpx;color: #4B4B4B;">12000.00</text>
						<u-icon name="arrow-right" color="#ACACAC" size="21"></u-icon>
					</view>
				</view> -->
				<view class="flex-r-b-c view3" @tap.stop="isShow = true">
					<text class="title_tit">支付方式：</text>
					<view class="flex-r-s-c">
						<text style="margin-right: 10rpx;color: #4B4B4B;">{{text}}</text>
						<u-icon name="arrow-right" color="#ACACAC" size="21"></u-icon>
					</view>
				</view>
			</view>
			<u-picker mode="selector" v-model="isShow" :range="paymentMethod" range-key="text" @confirm="paymentChoice"
				safe-area-inset-bottom z-index="99999999"></u-picker>
		</view>
		<view class="cart_box_btn" style="background-color: #FFFFFF00;" v-if="type==3" @tap.stop="paymentBtn">
			<view class="view1_btn flex-c-c-c" style="background-color: #FFFFFF00;">
				<view class="flex-c-c-c" style="border-radius: 100rpx!important;">
					<text>立即充值</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabList: [{ // tab 栏
					name: '未结算',
					tabIndex: 2
				}, {
					name: '已结算',
					tabIndex: 1
				}],
				paymentMethod: [{
					text: '余额'
				}, {
					text: '微信支付'
				}],
				type: null,
				newType: null,
				tabCurrent: 2, // tab 下标	
				page: 1, // 页码 
				objData: {}, // 累计金额统计
				orderList: [], // 列表数据
				titleText: '', // 上拉提示
				money: '', // 充值金额
				isShow: false,
				text: '余额',
				paymentId: 1,
			};
		},
		onLoad(el) {
			console.log(el)
			this.type = Number(el.type) //type=1 零售结算 type =2 贷款消耗 type=3 充值
			uni.setNavigationBarTitle({
				title: el.type == 1 ? '零售结算' : el.type == 2 ? '货款消耗' : '充值'
			})
			if (el.type == 1) {
				this.newType = el.newType //=1 分销 ==2代理
				this.getCommissiontj(el.newType) // 获取累计金额统计
			} else if (el.type == 2) {
				// this.goodsParagraphConsume() // 货款消耗
			} else {

			}
			this.getOrderList(el.type) // 列表信息
		},
		onReachBottom() {
			if (this.type == 3) return
			let that = this
			if (that.titleText == '') { // 防止上拉多次请求
				that.page = that.page + 1
				that.getOrderList(that.type)
			}
		},
		methods: {
			// 获取充值页面数据
			getRechargeData() {
				let that = this
				that.$api.getRechargeData().then(res => {
					console.log(res)
					that.objData = res.data.data
				})
			},
			// 获取货款消耗列表
			goodsParagraphConsume() {
				let that = this
				that.$api.goodsParagraphConsume({
					page: that.page
				}).then(res => {
					console.log(res)
					that.objData = res.data.data
					that.orderList = that.orderList.concat(res.data.data.list)
					that.titleText = res.data.data.list.length == 0 ? '暂无数据' : ''
				})
			},
			// 获取代理未结算列表
			getAgentList() {
				let that = this
				that.$api.agent_settlement({
					type: that.tabCurrent,
					page: that.page
				}).then(res => {
					that.objData = {
						no_price: res.data.data.no_price,
						set_price: res.data.data.price
					}
					that.titleText = res.data.data.content.length == 0 ? '暂无数据' : ''
					that.orderList = that.orderList.concat(res.data.data.content)
					console.log(res)
				})
			},
			// 获取累计金额统计
			getCommissiontj(new_type) {
				let that = this
				if (new_type == 1) {
					that.$api.commissiontj_data().then(res => {
						console.log(res)
						that.objData = res.data.data
					})
				} else if (new_type == 2) {

				}
			},
			// 列表信息
			getOrderList(type) {
				let that = this
				switch (Number(type)) {
					case 1:
						if (that.newType == 1) {
							that.$api.commission_list({
								type: that.tabCurrent,
								page: that.page
							}).then(res => {
								console.log(res)
								that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
								that.orderList = that.orderList.concat(res.data.data.data)
							})
						} else {
							that.getAgentList()
						}
						break;
					case 2:
						that.goodsParagraphConsume()
						break;
					case 3:
						that.getRechargeData()
						break;
				}

			},
			// tab 切换
			tabChange(e) {
				this.page = 1
				this.orderList = []
				this.tabCurrent = e.currentTarget.dataset.tabcurrent
				this.getOrderList(this.type)
			},
			// 详情
			goDetails(id) {
				uni.navigateTo({
					url: '/distribution/settlementDetails/settlementDetails?id=' + id + '&type=' + this.newType
				})
			},
			// 获取金额
			getMoney(e) {
				this.money = e.detail.value
			},
			// 点击支付方式选择
			paymentChoice(e) {
				this.text = this.paymentMethod[e].text
				e == 0 ? this.paymentId = 1 : this.paymentId = 2
			},
			// 点击支付充值
			paymentBtn() {
				let that = this
				let type = that.paymentId
				if (that.money == '') {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					})
				} else if (that.money < 0) {
					uni.showToast({
						title: '充值金额不能为负数',
						icon: 'none'
					})
				} else {
					that.$api.recharge({
						type: type,
						money: that.money
					}).then(res => {
						console.log(res)
						if (type == 1) {
							this.money = ''
							this.getOrderList(3)
							uni.showToast({
								title: '充值成功',
								icon: 'none'
							})
							let page = getCurrentPages()
							let pages = page[page.length - 2]
							pages.$vm.getAgentData()
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								...res.data.data,
								success(res) {
									this.money = ''
									this.getOrderList(3)
									uni.showToast({
										title: '充值成功',
										icon: 'none'
									})
									let page = getCurrentPages()
									let pages = page[page.length - 2]
									pages.$vm.getAgentData()
									
								},
								fail(err) {
									console.log(err)
								}
							})
						}

						// uni.navigateBack()
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.settlement {
		.top {
			width: 100vw;
			height: 320rpx;
			display: inline-block;
			text-align: center;

			.outerCircle {
				display: inline-block;
				width: 286rpx;
				height: 286rpx;
				margin: 16rpx auto;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);

				.circular {
					width: 270rpx;
					height: 270rpx;
					margin: 8rpx auto;
					text-align: center;
					border-radius: 50%;
					background-color: #FFFFFF;
					color: #45806E;
					font-size: 32rpx;
					font-weight: 500;

					.money {
						font-size: 40rpx;

						text {
							margin-left: 10rpx;
							font-size: 46rpx;
							display: inline-block;
						}
					}
				}
			}
		}
		.content {
			width: 90vw;
			height: auto;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #FFFFFF;
			margin: 30rpx auto;
			border-radius: 12rpx;

			.tab_box {
				width: 100%;
				height: 102rpx;
				background-color: #FFFFFF;

				.tab_item {
					width: 50%;
					height: 100%;
					line-height: 102rpx;
					text-align: center;
					font-size: 28rpx;
					color: #7B7B7B;
					font-weight: 500;
					position: relative;
				}

				.active {
					color: #333333;
					font-size: 32rpx;
					font-weight: bold;

					&::after {
						width: 180rpx;
						height: 8rpx;
						content: ' ';
						background-color: #45806E;
						border-radius: 4rpx;
						position: absolute;
						top: 95rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.list {
				height: 144rpx;
				border-bottom: 1px solid #F2F2F2;

				.list_l {
					font-size: 28rpx;
					font-weight: 500;

					.time {
						color: #818181;
						font-size: 24rpx;
						margin-top: 18rpx;
					}
				}

				.list_r {
					.money {
						font-size: 32rpx;
						color: #FF6C1D;
					}
				}

				&:nth-child(2) {
					margin-top: 40rpx;
				}

				&:nth-last-child(1) {
					border-bottom: none;
				}
			}



		}
	}

	.list2 {
		width: 750rpx;
		margin-top: 20rpx;

		.list2_view2 {
			width: 750rpx;
			height: auto;
			padding: 24rpx 24rpx;
			background-color: #FFFFFF;
			margin-top: 10rpx;

			.list2_tit {
				font-size: 32rpx;
				color: #4B4B4B;
			}

			.list2_text_tit {
				font-size: 28rpx;
				color: #272823;
			}

			.list2_txt {
				font-size: 24rpx;
				color: #4B4B4B;
				margin-top: 10rpx;
			}

			.list2_time {
				font-size: 20rpx;
				color: #9A9A9A;
				margin-top: 10rpx;
			}
		}
	}

	.list3 {
		width: 750rpx;
		margin-top: 20rpx;

		.view3 {
			height: 88rpx;
			width: 100%;
			background-color: #FFFFFF;
			padding: 0rpx 32rpx;

			text {
				font-size: 28rpx;
				color: #FF6C1D;

			}
		}

		.title_tit {
			font-size: 28rpx !important;
			color: #4B4B4B !important;
			font-weight: 600 !important;
		}

		.view4 {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding: 0rpx 32rpx;

			.view3 {
				padding: 0rpx 0rpx !important;
				border-bottom: 1rpx solid #F2F2F2;
			}
		}
	}

	.cart_box_btn {
		width: 100vw;
		height: calc(constant(safe-area-inset-bottom) + 120rpx);
		height: calc(env(safe-area-inset-bottom) + 120rpx);
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;

		.view1_btn {
			width: 100%;
			height: 120rpx;

			view {
				width: 686rpx;
				height: 80rpx;
				background-color: #45806E;
				border-radius: 50rpx;

				text {
					font-size: 35rpx;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
